<script lang="ts" setup>
import { computed } from 'vue';

import { IconifyIcon } from '@vben/icons';

interface Props {
  title: string;
  value: number | string;
  prefix?: string;
  suffix?: string;
  precision?: number;
  color?: string;
  icon?: string;
  trend?: {
    type: 'down' | 'up';
    value: number;
  };
}

const props = withDefaults(defineProps<Props>(), {
  precision: 0,
  color: '#1890ff',
  icon: '',
});

const displayValue = computed(() => {
  if (typeof props.value === 'number') {
    return props.value.toFixed(props.precision);
  }
  return props.value;
});

const trendColor = computed(() => {
  if (!props.trend) return '';
  return props.trend.type === 'up' ? '#52c41a' : '#ff4d4f';
});
</script>

<template>
  <div class="statistics-card">
    <div class="card-header">
      <div class="title">{{ title }}</div>
      <div v-if="icon" class="icon">
        <IconifyIcon :icon="icon" />
      </div>
    </div>
    <div class="card-content">
      <div class="value" :style="{ color }">
        <span v-if="prefix" class="prefix">{{ prefix }}</span>
        {{ displayValue }}
        <span v-if="suffix" class="suffix">{{ suffix }}</span>
      </div>
      <div v-if="trend" class="trend" :style="{ color: trendColor }">
        <IconifyIcon
          :icon="trend.type === 'up' ? 'mdi:trending-up' : 'mdi:trending-down'"
          class="trend-icon"
        />
        {{ Math.abs(trend.value) }}%
      </div>
    </div>
  </div>
</template>

<style scoped>
.statistics-card {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
}

.statistics-card:hover {
  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.title {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.icon {
  font-size: 20px;
  color: #999;
}

.card-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.value {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.prefix,
.suffix {
  font-size: 16px;
  font-weight: normal;
}

.trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}

.trend-icon {
  margin-right: 4px;
  font-size: 14px;
}
</style>
